<template>
    <div ref="main" :class="classname" :style="{height:height,width:width}">

    </div>
</template>
<script>
import echarts from "echarts"
//引入主题
require('echarts/theme/macarons') 

//自适应
import resize from './mixins/resize'
export default {
        mixins:[resize],
        props:{
            classname:{
                type:String,
                default:"chart"
            },
            width:{
                type:String,
                default:'100%'
            },
            height:{
                type:String,
                default:"400px"
            },
            xAxisData:{ //左侧组件接受的数据
                type:Array,
                default:()=>["2022-02","2022-03","2022-04","2022-05","2022-06","2022-07"]
            },
            seriesData:{//饼状图中分配的数据
                type:Array,
                default:()=>[10,52,200,334,390,330]
            }
        },
        data(){
            return {
                chart:null //引用echarts实例属性
            }
        },
        mounted(){
            //当加载dom后,会调用this.initChart()来进行初始化echarts实例
            this.$nextTick(()=>{
                this.initChart()
            })
        },
        beforeDestroy(){
            if(!this.chart){
                return 
            }
            //注销实例
            this.chart.dispose()
            this.chart = null
        },
        methods:{
            initChart(){
                this.chart = echarts.init(this.$refs.main,"macarons")
                this.chart.setOption({
                    title : {   //标题
                        text: '近6个月发布的文章数'
                    },
                    tooltip : { //提示
                        trigger: 'axis',
                        axisPointer:{   //坐标轴指示器，坐标轴触发有效
                            type:"shadow" //默认为line直线，可选为shadow
                        }
                    },
                    legend: {
                        data:['蒸发量']
                    },
                    grid:{ //柱状图整体位置
                        left:"3%",
                        right:"4%",
                        bottom:"3%",
                        containLabel:true //是否包含坐标轴的刻度标签
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            data :this.xAxisData,
                            axisTick:{
                                alignWithLabel:true //刻度线与数值对其
                            }
                        }
                    ],
                    yAxis : [ //Y轴
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'发布数',
                            type:'bar',
                            data:this.seriesData,
                            width:"60%"
                        },
                        
                    ]
                })
            }
        }
}
</script>